{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% block title %}{% translate '同步信息列表' %}{% endblock %}

{% block head %}
    <style>


    </style>
{% endblock %}

{% block content %}
    <button type="button" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#staticBackdrop"
            style="margin-top: 20px">
        添加配置信息
    </button>
    <table class="table table-striped" style="margin-top: 20px">
        <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">存储桶</th>
            <th scope="col">本地目录</th>
            <th scope="col">服务地址</th>
            <th scope="col">对象存储目录</th>
            <th scope="col">存储桶token</th>
            <th scope="col">同步状态</th>
            <th scope="col">同步完成时间</th>
            <th scope="col">创建时间</th>

            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        {% for obj in page_obj %}
            <tr>
                <th scope="row">{{ obj.id }}</th>
                <td>{{ obj.bucket_name }}</td>
                <td>{{ obj.local_dir }}</td>
                <td>{{ obj.bash_url }}</td>
                <td>{{ obj.remote_path }}</td>
                <td>{{ obj.bucket_token }}</td>
                <td>{{ obj.get_sync_status_display }}</td>
                <td>{{ obj.sync_time }}</td>
                <td>{{ obj.create_time }}</td>

                <td>
                    <button class="btn btn-primary" id="sync_bucket" onclick="syncBucket(this)">同步</button>
                    {#                    <button class="btn btn-primary" id="stop_sync_bucket" onclick="">停止同步</button>#}
                </td>

            </tr>
        {% endfor %}

        </tbody>
    </table>


    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">配置信息</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="row mb-3">
                        <label for="bucket_name" class="col-sm-2 col-form-label">存储桶名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="bucket_name">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="bash_url" class="col-sm-2 col-form-label">服务地址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="bash_url">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="local_dir" class="col-sm-2 col-form-label">本地目录</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="local_dir" >
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="remote_path" class="col-sm-2 col-form-label">对象存储目录</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="remote_path" value="{{ dir_default }}" placeholder="{{ dir_default }}">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="bucket_token" class="col-sm-2 col-form-label">存储桶token</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="bucket_token">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="thread_num" class="col-sm-2 col-form-label">并发线程</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="thread_num">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="submit-id">提交</button>
                    </div>

                </div>

            </div>
        </div>
    </div>

    {% include 'num-pagination.html' %}

{% endblock %}

{% block script %}
    <script>

        document.getElementById('submit-id').addEventListener('click', function () {
            let bucket_name = document.getElementById('bucket_name').value
            let bash_url = document.getElementById('bash_url').value
            let local_dir = document.getElementById('local_dir').value
            let remote_path = document.getElementById('remote_path').value
            let bucket_token = document.getElementById('bucket_token').value
            let thread_num = document.getElementById('thread_num').value
            if (remote_path === ''){
                local_dir = {{ dir_default }}
            }

            $.ajax({
                url: '{% url 'sync_web:sync_web_info' %}',
                type: 'POST',
                headers: {
                    'X-CSRFToken': '{{csrf_token}}'
                },
                data: {
                    'bucket_name': bucket_name,
                    'bash_url': bash_url,
                    'local_dir': local_dir,
                    'remote_path': remote_path,
                    'bucket_token': bucket_token,
                    'thread_num': thread_num
                },

                success: function (data) {
                    alert('添加成功！')
                    window.location.reload()
                },
                error: function (data) {
                    // Handle error --  data.responseJSON.tips_msg

                    alert('添加失败！' + data.responseJSON.tips_msg)

                }
            })


        })


        function syncBucket(th) {
            let syncstatus = th.parentNode.parentNode.children[6].innerHTML
            {#if (syncstatus === '同步中') {#}
            {#    alert('正在同步中......')#}
            {#    return#}
            {# }#}

            if (syncstatus !== '未同步' || syncstatus !== '同步完成') {
                // ajax
                let bucket_id = th.parentNode.parentNode.children[0].innerHTML
                $.ajax({
                    url: '{% url 'sync_web:sync_web_server' %}',
                    type: 'POST',
                    headers: {
                        'X-CSRFToken': '{{csrf_token}}'
                    },
                    data: {
                        'bucket_id': bucket_id,
                    },

                    success: function (data) {
                        alert('任务添加成功！')
                        window.location.reload()
                    },
                    error: function (data) {
                        // Handle error --  data.responseJSON.tips_msg

                        alert('添加失败！' + data.responseJSON.tips_msg)

                    }
                })
            }

        }

    </script>
{% endblock %}